<script setup lang="ts">
import {ref} from "vue";
import myAxios from "../../plugins/MyAxios.ts";
import {useRouter} from "vue-router";
import {showFailToast, showSuccessToast} from "vant";
import {searchUserListStore} from "../../store/searchUserListStore.ts";
import { items, show, tagsMap } from "../../common/treeSelectList.ts";

const onClickLeft = () => history.back();
const checked = ref([])

const userName = ref()

const isShowSearchByUserName = ref(false)
const isShowSearchByTags = ref(false)
const isDisabledSearchByUserName = ref(false)
const isDisabledSearchByTags = ref(false)
const isShowAndDisable = () => {
  const name = checked.value[0]
  if (name === 'searchByUserName') {
    isShowSearchByUserName.value = true;
    isShowSearchByTags.value = false;
    isDisabledSearchByTags.value = true;
    isDisabledSearchByUserName.value = false;
  } else if (name === 'searchBySomeTags' || name === 'searchByAllTags') {
    isShowSearchByUserName.value = false;
    isShowSearchByTags.value = true;
    isDisabledSearchByUserName.value = true;
    isDisabledSearchByTags.value = false;
  } else {
    isShowSearchByUserName.value = false;
    isShowSearchByTags.value = false;
    isDisabledSearchByUserName.value = false;
    isDisabledSearchByTags.value = false;
  }
}

const router = useRouter()
const onSearch = async () => {
  const result = await myAxios.post('/user/search', {
    userName: userName.value
  })
  if (result.data.code === 200) {
    showSuccessToast("查询成功！！")
    useList.setUserList(result.data.data)
    await router.push('/showSearchUserList')
  }
}

const activeIds = ref([]);
const activeIndex = ref(0);
// const items = [
//   {
//     text: '年级',
//     children: [
//       {text: '大一', id: 1},
//       {text: '大二', id: 2},
//       {text: '大三', id: 3},
//       {text: '大四', id: 4},
//       {text: '研究生', id: 5},
//       {text: '博士', id: 6},
//     ],
//   },
//   {
//     text: '编程语言',
//     children: [
//       {text: 'C/C++', id: 7},
//       {text: 'Java', id: 8},
//       {text: 'Python', id: 9},
//       {text: 'C#', id: 10},
//       {text: 'PHP', id: 11},
//       {text: 'Golang', id: 12},
//     ],
//   },
//   {
//     text: '爱好',
//     children: [
//       {text: '运动', id: 13},
//       {text: '唱歌', id: 14},
//       {text: '画画', id: 15},
//       {text: '跳舞', id: 16},
//     ]
//   },
// ];

// let tagsMap: Map<string, number> = new Map<string, number>();
// const show = (item: TreeSelectChild) => {
//   if (tagsMap.size <= 0) {
//     tagsMap.set(item.text, 1);
//   } else {
//     const text = tagsMap.get(item.text);
//     if (text === undefined) {
//       tagsMap.set(item.text, 1);
//     } else {
//       tagsMap.set(item.text, text + 1);
//     }
//   }
// }

const useList = searchUserListStore();
const search = async () => {
  const tagsList = Array.from(tagsMap)
      .filter(([, value]) => value % 2 !== 0)
      .map(([key]) => key);
  try {
    const name = checked.value[0]
    let result;
    if (name === 'searchBySomeTags') {
      result = await myAxios.post('/user/search/someTags', {
        tagsList: tagsList
      });
    } else if (name === 'searchByAllTags') {
      result = await myAxios.post('/user/search/allTags', {
        tagsList: tagsList
      });
    }
    if (result !== undefined && result.data.code === 200) {
      useList.setUserList(result.data.data)
      await router.push('/showSearchUserList')
      showSuccessToast("查询成功！");
      tagsMap.clear()
    }
  } catch (e) {
    showFailToast("查询失败！")
    console.log(e)
  }
}
</script>

<template>
  <van-nav-bar title="麦语伙伴" left-text="返回" left-arrow @click-left="onClickLeft"/>
  <div style="display: flex; justify-content: center">
    <div>
      <b>请选择查询方式</b>
    </div>
  </div>

  <div style="margin: 20px auto">
    <van-checkbox-group v-model="checked" @change="isShowAndDisable" :max="1" direction="horizontal"
                        style="margin-left: 50px">
      <van-checkbox name="searchByUserName" :disabled="isDisabledSearchByUserName" style="margin-bottom: 20px">根据用户昵称查询
      </van-checkbox>
      <van-checkbox name="searchBySomeTags" :disabled="isDisabledSearchByTags" style="margin-bottom: 20px">
        查询包含某些标签的用户
      </van-checkbox>
      <van-checkbox name="searchByAllTags" :disabled="isDisabledSearchByTags" style="margin-bottom: 20px">
        查询包含所有这些标签的用户
      </van-checkbox>
    </van-checkbox-group>
  </div>
  <van-divider/>

  <van-search
      v-model="userName"
      show-action
      placeholder="请输入查询的用户用户昵称"
      @search="onSearch"
      v-show="isShowSearchByUserName"
  >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <div v-show="isShowSearchByTags">
    <van-tree-select
        v-model:active-id="activeIds"
        v-model:main-active-index="activeIndex"
        :items="items"
        @click-item="show"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" @click="search">
        查询
      </van-button>
    </div>
  </div>
</template>

<style scoped>

</style>